<template>
  <div class="dialog-gratuity text-center">
      <span class="dialog-close" @click="closeDialog">×</span>
      <div class="gratuity-receiver">
          <h5>红包打赏给</h5>
          <div class="gratuity-receiver-list">
            <swiper :options="swiperOption" width="270px;">
　　            <swiper-slide>
                    <div class="media gratuity-receiver-media">
                        <div class="media-object"><img src="./img/giver_logo.jpg" alt=""></div>
                        <h3 class="media-heading"><span class="tag">主播</span> 大鱼艺术教育1</h3>
                    </div>
                </swiper-slide>
　　            <swiper-slide>
                    <div class="media gratuity-receiver-media">
                        <div class="media-object"><img src="./img/giver_logo.jpg" alt=""></div>
                        <h3 class="media-heading"><span class="tag">主播</span> 大鱼艺术教育2</h3>
                    </div>
                </swiper-slide>
                <div class="swiper-button swiper-prev" slot="button-prev"><i class="icon icon-left"></i></div>
                <div class="swiper-button swiper-next" slot="button-next"><i class="icon icon-right"></i></div>
            </swiper>
          </div>
            <p class="media-desc">打赏榜上有名，赏金额会送给主播</p> 
            <p class="media-desc"><a href="#">服务声明</a></p>
      </div>
      <div class="bottom-radius">
        <div class="money-wrapper">
            <div class="money-wrapper-radius"></div>
            <div class="money-list">
                <div class="money-item"
                    v-for="(money, index) in acounts"
                    :key="money"
                    :class="{'active': activeAcount == index}"
                    @click="selectAcount(index)"
                ><span>{{money}} 元</span></div>
                <!-- <div class="money-item"><span>2元</span></div>
                <div class="money-item"><span>5元</span></div>
                <div class="money-item"><span>10元</span></div>
                <div class="money-item active"><span>50元</span></div>
                <div class="money-item"><span>100元</span></div> -->
            </div>
            <p class="money-other text-center" @click="showOtherMoney">其他金额</p>
        </div>
      </div>

  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: ['isShow'],
  data() {
    return {
        activeAcount: '-1',
        acounts: [1,2,5,10,50,100],
        swiperOption: {
          navigation: {
            nextEl: '.swiper-next',
            prevEl: '.swiper-prev'
          }
        }
    //     swiperList:[{
    //   id:"0001",
    //   imgUrl:"http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
    //   },{
    //   id:"0002",
    //   imgUrl:"http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
    //   }]

    };
  },
  computed: {},
  methods: {
    showOtherMoney(){
        this.activeAcount = -1;
        // 取消选中金额
        this.$emit('show-other-money');
    },
    closeDialog(){
        this.$emit('close-gratuity-dialog');
    },
    selectAcount(index){
        console.log(index)
        this.activeAcount = index;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>


.dialog-gratuity {
    width: 560px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 16px;
    background-color: #e24241;
    z-index: 200;

    .dialog-close {
        position: absolute;
        right: 20px;
        top: 30px;
        font-size: 56px;
        color: #fff;
        line-height: 0;
    }

    .bottom-radius {
        width: 100%;
        height: 190px;
        background-color: #c23634;
        border-radius: 16px;
        &:before {
            display: block;
            content: '';
            width: 560px;
            height: 236px;
            transform: translate3d(0, -50%, 0);
            background: #c23634;
            border-radius: 100%;
        }
    }

    .money-wrapper {
        padding-bottom: 20px;
        position: absolute;
        bottom: -20px;
        left: 20px;
        right: 20px;
        background-color: #fff;
        border-radius: 16px;
        .money-wrapper-radius{
            width: 520px;
            height: 236px;
            margin-left: 20px;
            position: absolute;
            overflow: hidden;
            transform: translate3d(-20px, -50%, 0);

            &:before {
                display: block;
                content: '';
                width: 560px;
                height: 236px;
                background: #fff;
                border-radius: 100%;
                transform: translate3d(-20px, 16px, 0);
            }
        }

        .money-list {
            width: 90%;
            margin: 0 auto;
            position: relative;
            font-size: 0;
        }

        .money-other {
            font-size: 24px;
            color: #fcba2e;
            line-height: 2;
        }
        .money-item {
            display: inline-block;
            width: 33.33%;
            > span {
                display: block;
                height: 60px;
                border: 1px solid #c23634;
                margin: 0 10px 20px;
                font-size: 28px;
                border-radius: 6px;
                line-height: 60px;
            }


            &.active {
                span {
                    color: #fff;
                    background-color: #c23634;
                }
            }
        }

    }
}

.gratuity-receiver {
    padding-top: 25px;
    margin-bottom: 128px;
    font-size: 28px;
    color: #fff;
    line-height: 2;
    z-index: 200;

    h5 {
        margin-bottom: 10px;
        font-size: 28px;
        color: #fcba2e;
        line-height: 2;
    }

    .swiper-container {
        width: 410px;
        margin: 0 auto;
    }



    .swiper-button {
        position: absolute;
        top: 24px;
        font-size: 80px;
        text-align: center;
        line-height: 0;
        color: rgba(255,255,255,.5);
    }
    .swiper-prev {left: 0;}
    .swiper-next {
        right: 0;
    }

    .media-object{
        width: 110px;
        height: 110px;
        border: 1px solid #d0d0d0;
        margin: 0 auto 20px;
        border-radius: 100%;
        overflow: hidden;
    }

    .media-heading { font-size: 32px; }
    .media-desc, .media-desc a { color: rgba(255,255,255, .6); }
    .tag {
        display: inline-block;
        width: 60px;
        height: 32px;
        margin-right: 10px;
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        color: #c23634;
        background: #fcba2e;
        border-radius: 4px;
    }
}

.gratuity-receiver-list {
    
}
</style>